<template>
  <div>
    <!-- header -->
    <div style="height: 60px; background: #3c7fff; display: flex; align-items: center; border-radius: 10px, 0;">
      <div style="width: 200px; display:flex; align-items: center; margin-left: 20px;">
        <img src="@/assets/systemManage.png" style="width: 40px; margin-right: 10px;">
        <span style="font-size: 24px; color: white; "></span>  后台管理系统
      </div>
      <div style="flex: 1px;"></div>
      <div style="color: white; font-size: 15px; display: flex; width: fit-content; align-items: center; margin-right: 40px;">
        <img :src="userStore.userInfo?.avatar" style="width: 40px; height: 40; border-radius: 50%;">
        <span>&nbsp;&nbsp;{{ userStore.userInfo?.name }}</span>
      </div>
    </div>
    <div style="display: flex;">
      <!-- 左边菜单开始 -->
      <div style="width: 200px; border: 1px solid #ddd; min-height: calc(100vh - 60px);">
        <el-menu router :default-active="router.currentRoute.value.path":default-openeds="['1']"  style="border: 0;">
          <el-menu-item index="/manager/home">
            <el-icon><House /></el-icon>系统首页
          </el-menu-item>

          <el-sub-menu index="1">
            <template #title>
              <el-icon><User /></el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/manager/admin">管理员信息</el-menu-item>
            <el-menu-item index="/manager/employee">员工  信息</el-menu-item>
          </el-sub-menu>

          <el-menu-item index="/manager/data">
            <el-icon><DataAnalysis /></el-icon>数据统计
          </el-menu-item>
          <el-menu-item index="/manager/article">
            <el-icon><Document /></el-icon>文章管理
          </el-menu-item>
          <el-menu-item index="/manager/department">
            <el-icon><OfficeBuilding /></el-icon>部门管理
          </el-menu-item>
          <el-menu-item index="/manager/person">
            <el-icon><UserFilled  /></el-icon>个人信息
          </el-menu-item>
          <el-menu-item index="/manager/password">
            <el-icon><Lock  /></el-icon>修改密码
          </el-menu-item>
          <el-menu-item @click="logout">
            <el-icon><SwitchButton /></el-icon>退出登录
          </el-menu-item>
        </el-menu>
      </div>
      <!-- 结束 -->
      <!-- 右侧开始 -->
      <div style="flex: 1px; width: 0; background: #f8f7ff; padding: 10px;">
        <RouterView />
      </div>
      <!-- 右侧结束 -->
    </div>
  </div>
</template>

<script setup>
import { DataAnalysis, Document, Lock, OfficeBuilding, Reading } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/store/userStore';
const userStore = useUserStore()

const router = useRouter()
const logout = () => {
  userStore.clearUserInfo()
  router.replace({path: '/login'})
}
</script>
<style>
.el-menu .is-active{
  background-color: rgb(232, 236, 239) !important;
  border-radius: 10px;
}
.el-sub-menu__title{
  background-color: white !important;
}
</style>